@extends('web.layout')

@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/less/page.css') }}?ver={{ config('app.asset_version') }}"/>

@stop

@section('script')
    @parent
    <script>
        $('.faq-item').click(function () {
            if($(this).find('.faq-title').hasClass('faq-show')){
                $(this).find('.faq-title').removeClass('faq-show');
            }else{
                $(this).find('.faq-title').addClass('faq-show');
            }
            $(this).find('.faq-desc').slideToggle();
        })
    </script>
    <script>
        $(document).ready(function () {
            $('.qa-card').each(function () {
                var cardHeight = $(this).height();
                $(this).height(cardHeight);
            });

            setTimeout(function () {
                $('.qa-card').addClass('card-hide');
                $('.title-toggle').addClass('toggle-off');
            }, 1000);

            $('.qa-card').click(function () {
                if ($(this).hasClass('card-hide')) {
                    $(this).removeClass('card-hide');
                    $(this).find('.title-toggle').removeClass('toggle-off');
                } else {
                    $(this).addClass('card-hide');
                    $(this).find('.title-toggle').addClass('toggle-off');
                }
            });
            
        });
    </script>


@stop
@section('topic-title',$page->title )
@section('topic-describe',$page->desc )
@section('breadcrumb')
    <ul class="breadcrumb">
        <li><a href="{{ url('/') }}">首頁</a></li>
        <li class="active">{{ $page->title }}</li>
    </ul>
@stop
@section('content')


    <!-- <div class="container">


        <div class="main">
            <div id="page-about">

                <div class="content">
                    {!! app('cache.config')->replace($page->content) !!}
                </div>

            </div>
        </div>
    </div> -->

    <section class="section-qa">
        <div class="section-inner">
            <h2 class="section-title">舒壓常見問題</h2>
            <p class="section-title-sub">新客想舒壓卻有困擾？老司機有疑惑？精品舒壓專業客服為您解答所有問題，令您放心消費</p>
            
            <div class="qa-sec">
                @foreach($questions as $item)
                    <div class="qa-card">
                        <div class="chat-sec">
                            <div class="chat-box">
                                <i class="iconfont avatar">&#xe6ee;</i>
                                <div class="chat-content">
                                    <p class="name">匿名客人</p>
                                    <div class="chat-text-box">
                                        <p class="chat-text">{{ $item->title }}</p>
                                    </div>

                                </div>
                            </div>

                            <div class="title-toggle">
                                <span class="bars"></span>
                                <span class="bars"></span>
                            </div>

                        </div>
                        <div class="chat-sec answer">
                            <div class="chat-box">
                                <img src="/static/img/linepic.jpg" alt="">
                                <div class="chat-content">
                                    <p class="name">精品舒壓專業客服</p>
                                    @php
                                        $answer = explode(PHP_EOL,$item->answer)
                                    @endphp
                                    @foreach($answer as $v)
                                        @if($v)
                                            <div class="chat-text-box">
                                                <p class="chat-text">{{ trim($v) }}</p>
                                            </div>
                                        @endif
                                    @endforeach

                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
            <a target="_blank" data-inquire="" data-inquire-type="line" data-inquire-position="試試加Line向專業客服提問" href="{{ liaison_get('line_url') }}" class="trytry">仍然有疑惑？試試加Line向專業客服提問</a>
        </div>
    </section>


@endsection
